<template>
  <div class="app-container">
    <el-tabs v-model="activeName"  @tab-click="fetchData">
      <el-tab-pane label="审核中" name="1">
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="2">
      </el-tab-pane>
      <el-tab-pane label="审核失败" name="3">
      </el-tab-pane>
    </el-tabs >
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在加载数据..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="楼盘名称">
        <template slot-scope="scope">
          {{ scope.row.name?scope.row.name:'未完善' }}
        </template>
      </el-table-column>
      <el-table-column label="所属开发商" prop="managerName" align="center"/>
      <el-table-column label="诚意金" align="center">
        <template slot-scope="scope">
          {{ scope.row.sincer?scope.row.sincer:'不支持' }}
        </template>
      </el-table-column>
      <el-table-column label="失败原因" v-if="activeName=='3'" align="center" width="100">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="scope.row.remark">
            <span class='reasonsFailure' slot="reference">
              <i style="color: #409EFF" class="el-icon-view"></i>
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <a style="color: #409EFF" @click="goToMsgBui(scope.row.id)">查看</a>
        </template>
      </el-table-column>
    </el-table>
    <pagination @fetchData="fetchData" :total="total"/>
  </div>
</template>

<script>
  import { list } from '@/api/building'
  import pagination from '@/components/Pagination/index'
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    components:{
      pagination
    },
    data() {
      return {
        activeName: '1',
        total:0,
        list: null,
        listLoading: true
      }
    },
    created() {
      this.fetchData({limit:10,page:0})
    },
    methods: {
      goToMsgBui(id) {
        this.$router.push({ name: 'msgBui',query:{id} })
      },
      fetchData(data) {
        this.listLoading = true
        list({limit:data.limit,page:data.page,
          checkStatus:this.activeName=='1'?'checking':this.activeName=='2'?'success':'failed'}).then(res => {
          this.list = res.data
          this.total=res.total
        }).finally(()=>{
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.limit=val
        this.fetchData()
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page=val-1
        this.fetchData()

        console.log(`当前页: ${val}`)
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
